<template>
	<view>
		<v-form :model="form" ref="uForm" :rules="rules" id="form-container">
			<u-form-item label="设备条码" :label-width="labelWidth" class="u-flex u-flex-nowrap">
				<div class="u-flex u-flex-nowrap u-row-between">
					<u-input placeholder="请扫码获取设备条码" v-model="form.deviceBarcode"/>
					<u-button type="success" size="mini" @click="scanFun">扫码</u-button>
				</div>
			</u-form-item>
			<u-form-item label="排产编号" :label-width="labelWidth">
				<u-input placeholder="请扫码获取排产编号" v-model="form.planNo" disabled />
			</u-form-item>
			<u-form-item label="员工工号" :label-width="labelWidth">	
				<u-input v-model="form.maintainJobNumber" @blur="getWorkerName"/>
			</u-form-item>
			<u-form-item label="员工姓名" :label-width="labelWidth">	
				<u-input v-model="form.workerName"/>
			</u-form-item>
			<u-form-item label="问题小类" prop="issueLittle" class="u-flex u-flex-nowrap" :label-width="labelWidthType">
				<div class="u-flex u-flex-nowrap u-row-between">
					<u-input v-model="form.issueLittle" />
					<u-button type="success" size="mini" @click="queryIssue">查询</u-button>
				</div>
			</u-form-item>
			<u-form-item label="问题大类" :label-width="labelWidth">
				<u-input v-model="form.issueLarge" disabled :placeholder="defaultReminder"/>
			</u-form-item>
			<u-form-item label="问题索引" :label-width="labelWidth">
				<u-input v-model="form.issueIndexes" disabled :placeholder="defaultReminder"/>
			</u-form-item>
			<u-form-item label="责任环节" :label-width="labelWidth">
				<u-input v-model="form.responsibility" disabled :placeholder="defaultReminder"/>
			</u-form-item>
			<u-form-item label="缺陷代码" :label-width="labelWidth">
				<u-input v-model="form.issueId" disabled :placeholder="defaultReminder"/>
			</u-form-item>
			<u-form-item label="问题性质" prop="natureId" :label-width="labelWidth">
				<u-input v-model="form.natureId" type="select" :select-open="showNature" @click="showNature = true"/>
			</u-form-item>
			<u-form-item label="描述信息" :label-width="labelWidth">
				<u-input v-model="form.maintainDesc" :type="type" :auto-height="autoHeight" placeholder="请输入不合格描述信息" />
			</u-form-item>
			<u-form-item label="图片上传" :label-widthw="labelWidth">
				<easy-upload
					:dataList="imageDataList" 
					:uploadUrl="setUploadUrl" 
					:deleteUrl="setDeleteUrl"
					:types="imageTypes"
					@deleteImage = "deleteFaImage"
					:autoUpload="setAutoUpload"
					@successImage="successImage"
					:uploadCount= "imageUpNumber"
				>
				</easy-upload>
			</u-form-item>
			<u-form-item label="视频上传" :label-widthw="labelWidth">
				<easy-upload
					:dataList="videoDataList" 
					:uploadUrl="setUploadUrl" 
					:deleteUrl="setDeleteUrl"
					@deleteVideo = "deleteFaVideo"
					:autoUpload="setAutoUpload"
					:types="videoTypes"
					@successVideo="successvideo"
				>
				</easy-upload>
			</u-form-item>
			<u-form-item class="u-flex u-row-center">
				<u-button type="success" size="medium" @click="postForm">提交</u-button>
			</u-form-item>
		</v-form>
		<u-popup mode="right" v-model="popShow">
			<view class="content">
				<scroll-view scroll-y="true" style="height: 300rpx;width:300rpx">
					<view v-for="(item,index) in issueList" class="buttonGap" :key="index">
						<u-button type="success" size="mini"  @click="selectIssue(item)">{{ item.issueLittle }}——{{ item.issueLarge }}</u-button>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<u-action-sheet :list="list" v-model="showNature" @click="problemNatureSelect"></u-action-sheet>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
import {getDisqualificationByBardCode, issueIndexes, getUserByJobNumber, saveMaintainInfo} from '../../../utils/index.js'
	export default {
		data() {
			return {
				form: {
					planNo: '',							//排产编号
					maintainDesc: '',					//不合格描述
					deviceBarcode: '',					//设备条码
					maintainJobNumber: '',				//维修人员工号
					issueId: '',						//缺陷代码
					natureId: '',						//问题严重类型ID
					videoUrl: '',						//证据视频URL
					imageUrl: '',						//证据图片URL
					issueLittle: '',					//问题小类
					workerName: '',						//员工姓名
					jobNumber: '',
				},
				list: [									//问题性质的选项
					{
					  text: "一般"
					},
					{
					  text: "轻微"
					},
					{
					  text: "严重"
					}
				],
				defaultReminder: '请输入问题小类进行查询',
				labelWidth: 140,						//表单每一项的宽度
				scanResult: '',							//条形码信息
				planNo: '',								//发送条形码后获取的planNo
				issueList: '',							//输入问题小类返回的与问题小类相关的数组数据
				popShow: false,							//弹出层的显示控制条件
				showNature: false,						//控制问题性质的显现
				setUploadUrl: "https://www.golwayhhln.top/hnsMes/fileTransmit/detectionFile",
				setDeleteUrl: "https://www.golwayhhln.top/hnsMes/fileTransmit/delFile",
				imageDataList: [],		//图片上传数据展示
				videoDataList: [],		//视频上传数据展示
				imageTypes: 'image',	//设置上传格式为图片
				videoTypes: 'video',	//设置上传格式为视频
				imageUpNumber: 3,		//设置上传图片最大数量
				setAutoUpload: true,		//设置自动上传图片
				user: uni.getStorageSync('user'),
			}
		},
		methods: {
			// 点击按钮，启用扫码函数
			scanFun() {
				let that = this
				uni.scanCode({
					onlyFromCamera: true,
					success: function (res) {
						that.scanResult = res.result
						that.getPlanNo()
					},
					fail() {
						console.log('识别失败')
					}
				})
			},
			// 通过条形码获取planNo，随后与条形码内容一起发到后台获取列表信息
			async getPlanNo() {
				const { data } = await getDisqualificationByBardCode({deviceBarcode: this.scanResult})
				const errMsg = data.msg
				if(data.code == '1') {
					this.$refs.uTips.show({
						title: '查询成功',
						type: 'success',
						duration: '2000'
					})
					this.form.planNo = data.data.planNo
					this.form.deviceBarcode = data.data.deviceBarcode
				} else {
					this.$refs.uTips.show({
						title: errMsg,
						type: 'warning',
						duration: '2000'
					})
				}
			},
			// 图片上传成功回调函数
			successImage(e){
				// 后台返回的图片存储地址放在consequence中
				let consequence = JSON.parse(e.data)
				if(consequence.code == '1') {
					this.$refs.uTips.show({
						title: '上传成功！',
						type: 'success',
						duration: '2000'
					})
					this.imageDataList.push(consequence.data.results)
					// this.form.imageUrl += consequence.data.results
					// this.form.imageUrl += '|'
				} else {
					this.$refs.uTips.show({
						title: '上传失败！',
						type: 'success',
						duration: '2000'
					})
				}
			},
			// 视频上传成功回调函数
			successvideo(e) {
				let consequence = JSON.parse(e.data)
				if(consequence.code == '1') {
					this.$refs.uTips.show({
						title: '上传成功！',
						type: 'success',
						duration: '2000'
					})
					// this.form.videoUrl = consequence.data.results
					this.videoDataList.push(consequence.data.results)
				} else {
					this.$refs.uTips.show({
						title: '上传失败！',
						type: 'success',
						duration: '2000'
					})
				}
			},
			// 提交表单
			async postForm() {
				const query = {}
				query.maintainDesc = this.form.maintainDesc
				query.maintainJobNumber = this.form.maintainJobNumber
				query.deviceBarcode = this.form.deviceBarcode
				query.imageUrl = this.imageDataList.join('|')
				query.videoUrl = this.videoDataList.join('|')
				query.issueId = this.form.issueId
				query.natureId = this.form.natureId == '一般' ? '1' : query.natureId == '轻微' ? '2' : '3'
				query.planNo = this.form.planNo
				const { data } = await saveMaintainInfo(query)
				const errMsg = data.msg
				if(data.code == 1) {
					this.$refs.uTips.show({
						title: errMsg,
						type: 'success',
						duration: '2000'
					})
				} else {
					this.$refs.uTips.show({
						title: errMsg,
						type: 'warning',
						duration: '2000'
					})
				}
			},
			// 输入问题小类来查找
			async queryIssue() {
				let query = {
					issueIndexes: this.form.issueLittle
				}
				query.workCenter = this.user.departmentName == '结构总装车间'?'装配车间':this.user.departmentName
				const { data } = await issueIndexes(query)
				this.issueList = data.data
				this.popShow = true
			},
			// 问题性质选项是数组，传入数组的index值，以此来确定选择了数组的第几项
			problemNatureSelect(index) {
				uni.hideKeyboard();
				this.form.natureId = this.list[index].text
			},
			// 将问题小类获取的参数填入表单
			selectIssue(value) {
				this.form.issueIndexes = value.issueIndexes
				this.form.issueLarge = value.issueLarge
				this.form.issueId = value.issueId
				this.form.responsibility = value.responsibility
				this.form.issueLittle = value.issueLittle
				this.popShow = false
			},
			// 删除图片接口
			deleteFaImage(data) {
				this.imageDataList.splice(data,1)
			},
			// 删除图片接口
			deleteFaVideo(data) {
				this.videoDataList.splice(data,1)
			},
			// 查询员工工号获取员工姓名
			async getWorkerName() {
				const { data } = await getUserByJobNumber({jobNumber: this.form.maintainJobNumber})
				this.form.workerName = data.data.userName
			}
		}
	}
</script>

<style lang="scss" scoped>
.page-font {
	font-size: 40rpx;
}
.list-item-wrapper {
	margin: 30rpx;
	background-color: #FFEFD5;
}
.list-item {
	display: flex;
	justify-content: space-between;
	font-size: 16px;
	margin: 10rpx 10rpx;
}
.main-content {
	width: 100%;
}
#form-container ::v-deep .u-form-item {
	margin-top: 15rpx;
	padding: 10rpx 30rpx;
}
.content {
	padding: 24rpx;
	text-align: center;
}
.buttonGap {
	margin-top: 20rpx;
}
</style>

